<template>
<div>
	<div class="contconr">
          <div class="header">
			<div>
				<el-input placeholder="请输入地区" v-model="areaName" style="width: 600px;"></el-input>
			    <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
			</div>
		  </div>
		     <br><br>
			    <div><h2>房屋租凭</h2></div>
				<p style="margin-right: 80%;">一共有{{total}}条房源</p>
				<hr style="width: 89%; margin-right: 100px; ">
			<div class="main">
				<div v-for="item in houserList.records" :key="item.id" class="table">
					<router-link style="color:black;" :to="{ path: '/xq', query: { id: item.hid } }">
					 <el-image style="width: 180px; height: 170px; float: left;" :src="item.hlogo" ></el-image>
					 <div class="wenzi">
						<h3 style="margin-left: 20px;">地区:{{item.areaName}} <span>发布时间:{{item.htime}}</span></h3>
						<p><span>房间:{{item.roomNum}}-{{item.rentingType}}</span> <span>付款方式:{{item.payType}}</span></p>
						<p><span>房屋面积:{{item.hproportion}}平方</span></p>
						<p><span>详细地址:{{item.haddress}}</span> <span><el-rate style="float: right;" v-model='item.hrecommend' disabled ></el-rate></span></p>
						<p><span class="hdesc">描述:{{item.hdesc}}</span> <span class="hprice">{{item.hprice}}元/月</span></p>
					 </div>
					 <div><el-avatar  :src='item.logo'></el-avatar> <p>{{item.rname}}</p></div>
					 </router-link>
				</div>
			</div>
			<div  style="clear:both;"></div>
			<div>
		<el-pagination class="page" @size-change="handleSizeChange" @current-change="handleCurrentChange" 
           :current-page="page.pageNum" :page-sizes="[5, 10, 20]" :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
           </el-pagination>
	</div>
	</div>
	
	
	</div>
</template>

<script>
 export default {
	data() {
		return{
			houserList:[],
			total:0,
			page:{
                pageNum:1,
                pageSize:10
            },
			areaName:''
		}
	},
	created() {
		document.title="租房优选"
		this.getHouserList();
	},
	methods: {
		// 搜索
		async search(){
			let ret = await this.$http.get('/qiantai/index/search',
			{params: { areaName:this.areaName,pageNum:this.page.pageNum,pageSize:this.page.pageSize }});
			this.houserList = ret.data;
			this.total = ret.data.total;
			// 时间转换
            this.houserList.records.forEach(record => {
            record.htime = new Date(record.htime).toLocaleString('zh-CN', {
              year: 'numeric',
              month: '2-digit',
              day: '2-digit',
              hour: '2-digit',
              minute: '2-digit'});
            });
			if(ret.code != 200){
              return this.$message.error(ret.message )
            }
            this.$message.success(ret.message);
			console.log(ret);
		},
		// 查询所有
		async getHouserList(){
            let ret = await this.$http.get('/qiantai/index/selectAll', { params: this.page });
            this.houserList = ret.data;
			// 时间转换
            this.houserList.records.forEach(record => {
            record.htime = new Date(record.htime).toLocaleString('zh-CN', {
              year: 'numeric',
              month: '2-digit',
              day: '2-digit',
              hour: '2-digit',
              minute: '2-digit'});
            });
            this.total = ret.data.total;
			console.log(ret);
        },
		tiaoz(){
			this.$router.push('/houin');
		},
		handleSizeChange(size){
        //  console.log('变化每页条数',size);
         this.page.pageSize = size 
         this.getHouserList();  //刷新
      },
      handleCurrentChange(p){
        //  console.log('变化页码',p);
         this.page.pageNum = p 
         this.getHouserList();  //刷新
      },
	}
  };
</script>

<style lang="less" scoped>
.contconr {
	width: 100%;
	height: 100%;
	display: flex;
  flex-direction: column; /* 子元素垂直排列 */
  align-items: center; /* 子元素水平居中 */
  justify-content: center; /* 子元素垂直居中 */
}
.header {
	background-image: url('https://ts1.cn.mm.bing.net/th/id/R-C.f7cb7e8c3bd207f849ff62dde2475751?rik=PvJwCt5Oj3flTQ&pid=ImgRaw&r=0');
	background-color: bisque;
	width: 100%;
	height: 200px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	padding-top: 80px;
	 margin-top: -20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.main {
	width: 100%;
	// height: 100%;
	// padding-top: 20px;
	display: flex;
    flex-wrap: wrap; /* 允许子元素换行 */
    justify-content: center; /* 子元素水平居中 */
	margin-right: 100px;
}
.table{
	margin-top: 50px;
	background-color: white;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.324); /* 添加阴影 */
	border-radius: 5px;
	padding: 20px;
	width: 650px;
	height: 170px;
	float: left;
	margin-left: 5%;
	.wenzi{
		margin-top: -20px;
		float: left;
		span{
			margin-left: 20px;
		}
	}
}
.hdesc{
	display: inline-block;
	width: 250px; /* 设置合适的宽度 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hprice{
	color: red;
	padding-left: 48px;
}
.logo{
	margin-left: 40px;
}
.page{
	margin-top: 20px;
	margin-right: 1000px;
}
</style>
